<template>
	<view class="container">
		<view class="content">
			<view class="adContainer">
				<ad unit-id="adunit-37111dbf963aceb3"></ad>
			</view>
			<view class="listView">
				<view class="cell" :key="index" v-for="(item, index) in list" @click="clickItem(index)">
					<image class="icon" mode="aspectFill" :src='item.image'></image>
					<text class="title">{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import libData from "@/data/postcardData.js"
	import functionTool from "@/data/function.js"

	export default {
		onShareAppMessage() {
			return functionTool.defaultShare()
		},
		onShareTimeline() {
			return functionTool.defaultShare()
		},
		data() {
			return {
				list: []
			}
		},
		onLoad(options) {
			this.list = libData.cards
		},
		methods: {
			clickItem(index) {
				uni.navigateTo({
					url: '/pages/postcard/postcarddetail' + '?index=' + index
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;

		.content {
			display: flex;
			flex-direction: column;
			width: 100%;

			.adContainer {
				background-color: #FFFFFF;
			}
			
			.listView {
				display: flex;
				flex-flow: wrap;
				justify-content: center;
				margin-top: 10rpx;
				margin-bottom: 40rpx;
				
				.cell {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-top: 25rpx;
					width: 187.5rpx;
				
					.icon {
						width: 134rpx;
						height: 134rpx;
						border-radius: 67rpx;
					}
				
					.title {
						width: 100%;
						margin-top: 12rpx;
						color: #f21313;
						font-size: 35rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>
